<template>
  <div class="loginBox">
    <div class="container">

      <img class="bg1" src="./images/icon1.svg" alt="背景图片">

      <div class="login-form">

        <h2 id="text1">学生数字化管理系统</h2>

        <input class="login-input" type="text" name="" id="username" placeholder="请输入账号" v-model="user">
        <input class="login-input" type="password" name="" id="password" placeholder="请输入密码" v-model="password">

        <div class="option-radio">

<!--          <div class="option-radio-item">
            <input class="role-radio" id="student" name="radio" type="radio" value="student" checked="checked">
            <label class="radio-text" for="student">学生</label>
          </div>

          <div class="option-radio-item" id="option-radio-teacher">
            <input class="role-radio" id="teacher" name="radio" type="radio" value="teacher">
            <label class="radio-text" for="teacher">教师</label>
          </div>

          <div class="option-radio-item" id="option-radio-admin">
            <input class="role-radio" id="admin" name="radio" type="radio" value="admin">
            <label class="radio-text" for="admin">管理员</label>
          </div>-->
          <el-radio-group v-model="radio">
            <el-radio :label="0">管理员</el-radio>
            <el-radio :label="1">教师</el-radio>
            <el-radio :label="2">学生</el-radio>
          </el-radio-group>
        </div>
        <div style="display: flex; height: 40px;width: 280px;align-items: center;justify-content: space-between;margin-bottom: 10px;">
          <input class="login-input1" type="text" name="" id="code" placeholder="请输入验证码" v-model="code">
          <img :src="imgCode" @click="getCode" style="width: 120px; height: 40px">
        </div>
        <div class="option">
          <a class="forget option-item" href="#">忘记密码?</a>
        </div>

        <div>
          <button class="login-button" @click="handleLogin">登录</button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { login, getUserCode } from '@/api/user'
import user from "@/store/modules/user";

export default {
  name: 'Login',
  data() {
    return {
      radio: 0,
      user: '',
      password: '',
      code: '',
      imgCode: '',
      codeResult: ''
      // redirect: undefined
    }
  },
  // watch: {
  //   $route: {
  //     handler: function(route) {
  //       this.redirect = route.query && route.query.redirect
  //     },
  //     immediate: true
  //   }
  // },
  methods: {
    async handleLogin() {
      if (this.code !== this.codeResult) {
        this.$message.error('验证码错误！')
        await this.getCode()
        return false
      }
      if (this.user == '') {
        this.$message.error('账号不能为空')
      } else if (this.password == '') {
        this.$message.error('密码不能为空')
      } else {
        const params = {
          id: this.user,
          password: this.password,
          type: this.radio
        }
        const res = await login(params)
        console.log(res)
        if (res.success === true) {
          this.$store.commit('SET_TOKEN', res.data)
          this.$router.push({ path: '/'})
          sessionStorage.setItem('username', this.user)
          sessionStorage.setItem('type', this.radio)
          if (this.radio == 0) {
            if (res.authority == 'b') {
              sessionStorage.setItem('type', '3')
            } else if (res.authority == 'c') {
              sessionStorage.setItem('type', '4')
            } else if (res.authority == 'd') {
              sessionStorage.setItem('type', '5')
            } else if (res.authority == 'e') {
              sessionStorage.setItem('type', '6')
            } else if (res.authority == 'z') {
              sessionStorage.setItem('type', '7')
            }
          }
          this.$store.commit('SET_NAME', this.user)
        } else {
          this.$message.error(res.errorMsg)
        }
      }
    },
    async getCode() {
      const res = await getUserCode()
      if (res.success == true) {
        this.imgCode = res.data.data
        this.codeResult = res.result
      } else {
        this.$message.error(res.errorMsg)
      }
    }
  },
  created() {
    this.getCode()
  }
}
</script>


<style lang="scss" scoped>
/* 取消a标签的下划线 */
a {
  text-decoration: none;
  color: black;

}

.loginBox {
  height: 100vh;
  background: url("./images/login.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  border-radius: 8px;
  /* border: 2px solid #2f54eb; */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.bg1 {
  /* border: 2px solid #26272b; */
  width: 450px;
  height: 450px;

}

.login-form {
  /* border: 2px solid red; */
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

#text1 {
  color: #2f54eb;
  /* font-size: 20px; */
  margin: 0 0 35px 0;
}

.login-input {
  width: 280px;
  height: 32px;
  font-size: 14px;
  margin: 0 0 20px 0;
  padding: 0 0 0 20px;
  border: 1px solid #2f54eb;
  border-radius: 3px;
  background-color: #f1f3f8;
}

.login-input1 {
  width: 150px;
  height: 40px;
  font-size: 14px;
  padding: 0 0 0 20px;
  border: 1px solid #2f54eb;
  border-radius: 3px;
  background-color: #f1f3f8;
}

.option-radio {
  position: relative;
  display: flex;
  width: 300px;
  font-size: 14px;
  margin: 0 0 20px 0;
  /* 用户无法选中文本 */
  user-select: none;
}

.option-radio-item {
  width: 100px;
  height: 15px;
  /* background-color: red; */
  margin: 0 0 0 0;
}

#option-radio-teacher {
  position: absolute;
  left: 120px;
}

#option-radio-admin {
  position: absolute;
  right: -40px;
}

.role-radio {
  width: 15px;
  height: 15px;
}

.radio-text {
  position: absolute;
  line-height: 15px;
  margin: 0 0 0 3px;

}

.radio-text:hover {
  font-weight: 700;
  color: #2f54eb;
}

.option {
  position: relative;
  display: flex;
  width: 300px;
  font-size: 14px;
  margin: 0 0 20px 0;
  /* 用户无法选中文本 */
  user-select: none;
  /* background-color: red; */
}

.remember-checkbox {
  width: 15px;
  height: 15px;
}

.option-item {
  line-height: 15px;
}

.option-item:hover {
  font-weight: 700;
  color: #2f54eb;
}

.remember-text {
  margin: 0 0 0 3px;
}

.forget {
  position: absolute;
  right: 0px;
}

.register {
  position: absolute;
  left: 120px;
}

.login-button {
  width: 300px;
  height: 38px;
  font-size: 14px;
  margin: 0 0 20px 0;
  background-color: #2f54eb;
  /* border: 1px solid #2f54eb; */
  color: #fff;
  border-radius: 3px;
}
</style>
